{extend name="common/base"/}
{block name="style"}
<style type="text/css">
    /* 这段样式只是用于演示 */
    .layui-card-header span {
        position: absolute;
        right: 10px;
        top: 10px;
    }
    .layui-sales {
        margin-bottom: 0;
        overflow: hidden;
        color: rgba(0,0,0,.85);
        font-size: 30px;
    }

    .layui-sales-info {
        padding-top: 16px;
        color: rgba(0,0,0,.65);
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    fieldset.layui-field-title {
        margin-bottom: 10px;
    }
</style>
{/block}
<!-- 主体 -->
{block name="body"}
<div class="p-3">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-xs6 layui-col-md3">
            <div class="layui-card" style="height: 130px">
                <div class="layui-card-header">用户数量</div>
                <div class="layui-card-body" style="line-height:70px">
                    <div class="layui-sales">{$userNum}</div>

                </div>
            </div>
        </div>
        <div class="layui-col-xs6 layui-col-md3">
            <div class="layui-card" style="height: 130px">
                <div class="layui-card-header">新增用户数量<span class="layui-badge layui-badge-blue pull-right">月</span></div>
                <div class="layui-card-body" style="line-height:70px">
                    <div class="layui-sales">{$userMonthNum}</div>

                </div>
            </div>
        </div>
        <div class="layui-col-xs6 layui-col-md9">
            <div class="layui-card">
                <div class="layui-card-header">用户趋势分析</div>
                <div class="layui-card-body">
                    <div id="zxrs" style="height: 578px;"></div>
                </div>
            </div>
        </div>
    </div>
</div>
{/block}
<!-- /主体 -->

<!-- 脚本 -->
{block name="script"}
<script src="https://cdn.staticfile.org/echarts/5.3.0/echarts.min.js"></script>
<script src="{__GOUGU__}/third_party/echart/china.js"></script>
<script>
    var moduleInit = ['tool'];

    function gouguInit() {
        var form = layui.form, tool = layui.tool;
        var layer = layui.layer;

        $.post('/admin/stat/user', {}, function(res) {
            var myCharts = echarts.init(document.getElementById('zxrs'));
            var mData = res.data.mData;
            var option = {
                tooltip: {
                    trigger: "axis"
                },
                xAxis: [{
                    type: "category",
                    boundaryGap: !1,
                    data: res.data.data
                }],
                yAxis: [{
                    type: "value"
                }],
                series: [{
                    name: "总量",
                    type: "line",
                    smooth: !0,
                    itemStyle: {
                        normal: {
                            areaStyle: {
                                type: "default"
                            }
                        }
                    },
                    data: mData
                }]
            };
            myCharts.setOption(option);
        },'json');
    }

</script>
{/block}
<!-- /脚本 -->